<template>
	<view class="my">
		<view class="my-header">
			<view class="title-head">
				<image class="img-head-my" src="../../static/img/big_3.png" mode="aspectFill"></image>
				<view class="title-name-my">桃之夭夭</view>
			</view>
			<view class="my-price-num">
				<view class="my-price-left">
					<view class="price-left">400.00</view>
					<view class="price-text">余额</view>
				</view>
				<view class="my-jifen-right my-price-left">
					<view class="price-left">100</view>
					<view class="price-text">积分</view>
				</view>
				<view class="line"></view>
			</view>
		</view>
		<view class="my-order">
			<view class="my-order-title">
				<view class="title-left">我的订单</view>
				<view class="title-right" @tap="$Router.push('/pages/order/my-order')">
					查看更多订单
					<image class="my-icon" src="../../static/img/right.png" mode=""></image>
				</view>
			</view>
			<view class="order-opt">
				<view class="opt-item-order" v-for="(item, i) in myOrderList" :key="i">
					<image class="opt-icon" :src="item.img" mode="heightFix"></image>
					<view class="opt-name">{{ item.name }}</view>
				</view>

			</view>
		</view>
		<view class="my-tool">
			<view class="tool-title">我的工具</view>
			<view class="tool-list">
				<view class="tool-item" v-for="(item,i) in toolList" :key="i" @tap="goToPage(item)">
					<view class="tool-left">
						<image class="item-img" :src="item.img" mode=""></image>
						<view class="item-title">{{ item.name }}</view>
					</view>
					<image class="item-icon" src="../../static/img/right.png" mode="heightFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myOrderList: [{
						img: '../../static/my-icon/obligation.png',
						type: 'obligation',
						name: '待付款'
					},
					{
						img: '../../static/my-icon/shopping.png',
						type: 'shopping',
						name: '待发货'
					},
					{
						img: '../../static/my-icon/shouhuo.png',
						type: 'shouhuo',
						name: '待收货'
					},
					{
						img: '../../static/my-icon/pingjia.png',
						type: 'obligation',
						name: '待评价'
					},
					{
						img: '../../static/my-icon/shouhou.png',
						type: 'obligation',
						name: '售后/退款'
					}
				],
				toolList: [{
						img: '../../static/my-icon/qinadao.png',
						type: 1,
						name: '每日签到'
					},
					{
						img: '../../static/my-icon/wallet.png',
						type: 2,
						name: '我的钱包'
					},
					{
						img: '../../static/my-icon/tuangou.png',
						type: 3,
						name: '我的团购'
					},
					{
						img: '../../static/my-icon/youhuiquan.png',
						type: 4,
						name: '优惠券'
					},
					{
						img: '../../static/my-icon/xinxi.png',
						type: 5,
						name: '个人信息'
					},
					{
						img: '../../static/my-icon/address.png',
						type: 6,
						name: '地址管理'
					},
					{
						img: '../../static/my-icon/jifen.png',
						type: 7,
						name: '积分兑换'
					},
					{
						img: '../../static/my-icon/fenxiao.png',
						type: 8,
						name: '我的分销'
					}
				]
			};
		},
		methods: {
			goToPage(item) {
				let type = item.type
				switch (type) {
					case 1:
						this.jump('/pages/my/sing-in')
						break;
					case 2:
						this.jump('/pages/my/wallet')
						break;
					case 3:
						this.jump('/pages/goods/my-group')
						break;
					case 4:
						this.jump('/pages/my/discount')
						break;
					case 5:
						this.jump('/pages/my/userinfo')
						break;
					case 6:
						this.jump('/pages/order/address')
						break;
					case 7:
						this.jump('/pages/my/jifen')
						break;
					case 8:
						console.log(type);
						break;
				}
			},
			jump(path) {
				this.$Router.push(path)
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #ccc;
	}

	.my {
		padding-bottom: 100rpx;
	}

	.my-header {
		width: 750rpx;
		height: 450rpx;
		opacity: 0.8;
		background: url('../../static/img/my-bj.png') no-repeat;
		background-size: cover;

		.title-head {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 90rpx;



			.img-head-my {
				width: 173rpx;
				height: 173rpx;
				border-radius: 50%;
			}

			.title-name-my {
				margin-top: 15rpx;
				font-size: 30rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 24rpx;
				letter-spacing: 3rpx;
				color: #ffffff;
			}
		}

		.my-price-num {
			position: relative;
			margin-top: 53rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.line {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 1rpx;
				height: 68rpx;
				background-color: #ffffff;
				opacity: 0.6;
			}

			.my-price-left {
				display: flex;
				flex-direction: column;
				text-align: center;
			}

			.price-left {
				font-size: 32rpx;
				color: #ffffff;
				font-weight: 500;
			}

			.price-text {
				font-size: 26rpx;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}

	.my-order {
		margin-top: 20rpx;
		width: 100%;
		padding: 30rpx 20rpx 33rpx;
		box-sizing: border-box;
		background-color: #fff;

		.my-order-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #e2e2e2;

			.title-left {
				font-size: 30rpx;
				letter-spacing: 3rpx;
				color: #333333;
			}

			.title-right {
				font-size: 22rpx;
				letter-spacing: 2rpx;
				color: #989898;
				display: flex;
				align-items: center;

				.my-icon {
					width: 11rpx;
					height: 22rpx;
					margin-left: 15rpx;
				}
			}
		}

		.order-opt {
			margin-top: 26rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.opt-item-order {
				display: flex;
				align-items: center;
				flex-direction: column;
				text-align: center;

				.opt-icon:nth-child(1) {
					width: 45rpx;
					height: 40rpx;
				}

				.opt-icon:nth-child(2) {
					width: 44rpx;
					height: 38rpx;
				}

				.opt-icon:nth-child(3) {
					width: 54rpx;
					height: 38rpx;
				}

				.opt-icon:nth-child(4) {
					width: 35rpx;
					height: 40rpx;
				}

				.opt-icon:nth-child(5) {
					width: 38rpx;
					height: 39rpx;
				}

				.opt-name {
					margin-top: 10rpx;
					font-size: 22rpx;
					letter-spacing: 2rpx;
					color: #666666;
				}
			}
		}
	}

	.my-tool {
		margin-top: 20rpx;
		padding: 30rpx 20rpx 0;
		background-color: #fff;

		.tool-title {
			padding-bottom: 20rpx;
			border-bottom: 1px solid #e2e2e2;
		}

		.tool-list {
			.tool-item {
				height: 87rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 28rpx;
				border-bottom: 1px solid #e2e2e2;

				.tool-left {
					display: flex;
					align-items: center;

					.item-img {
						width: 30rpx;
						height: 32rpx;
					}

					.item-img:nth-child(3) {
						width: 30rpx;
						height: 30rpx;
					}

					.item-img:nth-child(4) {
						width: 30rpx;
						height: 28rpx;
					}

					.item-title {
						margin-left: 37rpx;
						font-size: 26rpx;
						letter-spacing: 2rpx;
						color: #333333;
					}
				}


				.item-icon {
					width: 13rpx;
					height: 24rpx;
				}
			}

			.tool-item:last-child {
				border-bottom: none;
			}
		}
	}
</style>
